<template>
    <div class="uc-container">
        <div class="uc-left-container">
            <el-card style="width: 100%;height: 100%;">
                <template #header>
                    <div class="card-header">
                        <span>{{ t('个人信息') }}</span>
                    </div>
                </template>
                <div class="uc-left-avatar">
                    <VAvatar :size="150" :src="avatar" />
                </div>
                <div class="uc-left-item">
                    <div>{{ t('账号') }}</div>
                    <div>{{ t(userStore.nameId) }}</div>
                </div>
                <el-divider />
                <div class="uc-left-item">
                    <div>{{ t('用户名') }}</div>
                    <div>{{ t(userStore.userName || '匿名') }}</div>
                </div>
                <el-divider />
                <div class="uc-left-item">
                    <div>{{ t('角色') }}</div>
                    <div>{{ t(userStore.roleName) }}</div>
                </div>
                <el-divider />
            </el-card>
        </div>
        <div class="uc-right-container">
            <el-card style="width:100%;height: 100%;">
                <template #header>
                    <div class="card-header">
                        <span>{{ t('基本资料') }}</span>
                    </div>
                </template>
                <el-tabs v-model="activeName">
                    <el-tab-pane label="基本信息" name="base">
                        <el-form ref="ucBaseForm" :model="ruleForm" :rules="rules" status-icon style="padding:10px"
                            label-position="right" label-width="80">
                            <el-form-item :label="t('用户名')" prop="userName">
                                <ElInput v-model="ruleForm.userName"></ElInput>
                            </el-form-item>
                            <ElDivider></ElDivider>
                            <el-form-item>
                                <ElButton type="primary" @click="doSave">{{ t('保存') }}</ElButton>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <el-tab-pane label="修改密码" name="pwd">
                        <el-form ref="ucPasswordForm" :model="passwordForm" :rules="pwRules" status-icon
                            style="padding:10px" label-position="right" label-width="80">
                            <el-form-item :label="t('旧密码')" prop="oldPw">
                                <ElInput v-model="passwordForm.oldPw" type="password" :show-password="true"> </ElInput>
                            </el-form-item>
                            <el-form-item :label="t('新密码')" prop="newPw">
                                <ElInput v-model="passwordForm.newPw" type="password" :show-password="true"> </ElInput>
                            </el-form-item>
                            <el-form-item :label="t('确认密码')" prop="confirmPw">
                                <ElInput v-model="passwordForm.confirmPw" type="password" :show-password="true">
                                </ElInput>
                            </el-form-item>
                            <ElDivider></ElDivider>
                            <el-form-item>
                                <ElButton type="primary" @click="doSavePw">{{ t('保存') }}</ElButton>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                </el-tabs>
            </el-card>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ElCard, FormRules } from 'element-plus';
import { t } from '@/common/locale'
import { useUsers } from '@/stores';
import { reactive, ref } from 'vue';
import elHelper from '@/common/elHelper'
import { useRouter } from 'vue-router';
import VAvatar from '@/components/other/VAvatar.vue';
const userStore = useUsers()
const route = useRouter()
if (!userStore.getLoginToken()) {
    route.push('/')
}
const avatar = ref(userStore.avatar)
const activeName = ref('base')
const ucBaseForm = ref()
interface RuleForm {
    userName: string
}
interface PasswordForm {
    oldPw: string,
    newPw: string,
    confirmPw: string
}
const ruleForm: RuleForm = reactive({
    userName: userStore.userName
})
const passwordForm: PasswordForm = reactive({
    oldPw: '',
    newPw: '',
    confirmPw: ''
})
const rules = reactive<FormRules<RuleForm>>({
    userName: [
        { required: true, message: t('请输入用户名'), trigger: 'blur' }
    ]
})
const pwRules = reactive<FormRules<PasswordForm>>({
    oldPw: [
        { required: true, message: t('请输入旧密码'), trigger: 'blur' }
    ],
    newPw: [
        { required: true, message: t('请输入新密码'), trigger: 'blur' }
    ],
    confirmPw: [
        { required: true, message: t('请输入确认密码'), trigger: 'blur' }
    ]
})
const doSave = async () => {
    if (!ucBaseForm.value) return
    const validResult = await ucBaseForm.value.validate((valid) => valid)
    if (validResult) {
        elHelper.showWarningMsg('功能开发中')
    }
}
const doSavePw = async () => {
    if (!ucBaseForm.value) return
    const validResult = await ucBaseForm.value.validate((valid) => valid)
    if (validResult) {
        elHelper.showWarningMsg('功能开发中')
    }
}
</script>
<style scoped lang="scss">
.uc-container {
    height: 95%;
    display: flex;
    justify-content: center;
    align-items: center;

    .uc-left-container {
        width: 30%;
        height: 98%;
        padding: 15px;

        .uc-left-avatar {
            display: flex;
            width: 100%;
            justify-content: center;
            align-items: center;
        }

        .uc-left-item {
            display: flex;
            justify-content: space-between;
        }

    }

    .uc-right-container {
        width: 70%;
        height: 98%;
        padding: 15px;
    }
}
</style>